<template>
  <div>
    <Pane>
      <span slot="title">添加账号</span>
      <section slot="content">
        <el-form :model="accountData" ref="accountRef">
          <el-row>
            <el-col :span="6">
              <el-form-item label="帐号">
                <el-input v-model="accountData.account" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="密码">
                <el-input v-model="accountData.password" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="用户组">
                <el-select v-model="accountData.userGroup" placeholder="请选择用户组">
                  <el-option label="普通管理员" value="普通管理员"></el-option>
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" @click="saveAccount">添加</el-button>
                <el-button @click="resetAccount">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </section>
    </Pane>
  </div>
</template>

<script>
import Pane from '@/components/Pane/Pane.vue'
import { addAccount } from '@/api/account.js'
export default {
  name: 'AcountAdd',
  props: {},
  data() {
    return {
      accountData: {
        account: '',
        password: '',
        userGroup: ''
      }
    }
  },
  methods: {
    resetAccount() {
      // console.log(this.$refs.accountRef)
      this.$refs.accountRef.resetFields()
      this.accountData = {
        account: '',
        password: '',
        userGroup: ''
      }
    },
    async saveAccount() {
      console.log(this.accountData.password)
      const { code } = await addAccount({
        account: this.accountData.account,
        password: this.accountData.password,
        userGroup: this.accountData.userGroup
      })
      if (code === 0) {
        this.resetAccount()
      }
    }
  },
  components: {
    Pane
  }
}
</script>

<style scoped >
</style>
